
<template>
	<div>
        <div class="order-flow" v-for="(item, idx) in valueData" :key="idx"  v-show="show_infos || idx == valueData.length-1">
            <div v-if="item">
                <span class="time">{{item.createdtime?item.createdtime.substring(5,16):''}}</span>
                <span class="icon"></span>
                <div class="con">
                    <p>{{item.uname==""?'':item.uname + '：'}}</p>
                    <p class="des">
                        <span class="way" v-if="item.way && $root.$data.ways[item.way].show">{{$root.$data.ways[item.way].txt}}</span>
                        {{(fKind[item.fkind] && fKind[item.fkind].show) ? fKind[item.fkind].txt:''}}
                        {{(fKind[item.fkind] && fKind[item.fkind].show && item.des)  ? '，'+fKind[item.fkind].des:''}}{{item.des}}
                    </p>
                    <div class="imgLis">
                        <a
                            v-for="(imgs, idx) in item.imgs"
                            :key="idx"
                            href="javascript:void(0)"
                            @click="showImgFn(imgs)">
                            <img v-if="imgs" :src="imgs">
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div v-show="valueData.length > 1 && !show_infos" class="tab-followup" @click="show_infos = true">
            <span class="iconfont icon-zhankai"></span> 展开查看更多
        </div>
        <div v-show="valueData.length > 1 && show_infos" class="tab-followup" @click="show_infos = false">
            <span class="iconfont icon-zhankai1"></span> 收起
        </div>
	</div>
</template>

<script>
	export default{
        name:'FollowUp',
        props:{
            valueData:{
                type:Array,
                default:function(){
                    return [

                    ]
                }
            }
        },
		data(){
			return {
                fKind: {
                    '1':{txt:'后台退单',show:true,des:'备注：'},
                    '2':{txt:'后台审核',show:false,des:''},
                    '3':{txt:'后台完成订单',show:false,des:''},
                    '4':{txt:'后台接单',show:false,des:''},
                    '5':{txt:'大小类变更',show:true,des:'内容：'},
                    '6':{txt:'后台指派',show:false,des:''},
                    '7':{txt:'销单',show:true,des:'备注：'},
                    '8':{txt:'拒单',show:false,des:''},
                    '9':{txt:'添加耗材',show:true,des:'内容：'},
                    '10':{txt:'删除耗材',show:true,des:'内容：'},
                    '11':{txt:'创建订单',show:false,des:''},
                    '12':{txt:'app指派',show:false,des:''},
                    '13':{txt:'通过审核',show:false,des:''},
                    '14':{txt:'审核不通过',show:false,des:''},
                    '15':{txt:'删除指定接单人',show:false,des:''},
                    '16':{txt:'更改订单描述',show:true,des:'内容：'},
                    '17':{txt:'添加处理备注',show:true,des:'内容：'},
                    '18':{txt:'删除处理备注',show:true,des:'内容：'},
                    '19':{txt:'接单',show:false,des:''},
                    '20':{txt:'完成订单',show:false,des:''},
                    '21':{txt:'修改耗材',show:true,des:'内容：'},
                    '22':{txt:'完成',show:false,des:''},
                    '23':{txt:'签到',show:false,des:''},
                    '24':{txt:'普通单转急单',show:false,des:''},
                    '25':{txt:'急单转普通单',show:false,des:''},
                    '26':{txt:'填写了报修人',show:false,des:''},
                    '27':{txt:'待指派催单',show:false,des:''},
                    '28':{txt:'已指派推送提醒',show:false,des:''},
                    '29':{txt:'已指派短信提醒',show:false,des:''},
                    '30':{txt:'上传完成图片',show:false,des:''},
                    '31':{txt:'修改完成图片',show:false,des:''},
                    '32':{txt:'抢单成功',show:false,des:''},
                    '33':{txt:'来电弹屏下服务咨询单的',show:false,des:''},
                    '34':{txt:'后台指派主管分配',show:false,des:''},
                    '35':{txt:'重新指派',show:false,des:''},
                    '36':{txt:'挂单',show:true,des:'备注：'},
                    '37':{txt:'取消挂单',show:false,des:''}
                },
                show_infos:false
			}
		},
        methods:{
            showImgFn(url){
                this.$emit('show-img',url)
            }
        }
	}
</script>
<style scoped lang="less">
    .order-flow {
        position: relative;
        line-height: 24px;
        &:hover {
             background-color: #fff;
         }
        .time {
            position: absolute;
            left: 0;
            top: 6px;
            width: 90px;
        }
        .icon {
            position: absolute;
            left: 93px;
            top: 11px;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            border: 3px solid #f5f5f5;
            background-color: #c3c0c0;
        }
        .con {
            margin-left: 100px;
            padding: 8px 3px 8px 16px;
            border-left: 2px solid #c3c0c0;
            min-height: 56px;
            text-align: left;
        }
        .des {
            padding: 3px 5px;
        }
         .way {
            background-color: #7b7b7b;
            font-size: 14px;
            padding: 2px 6px;
            color: #fff;
            border-radius: 4px;
            line-height: 1;
        }
    }
    .imgLis {
        a {
            display: inline-block;
            vertical-align: middle;
            width: 36px;
            height: 36px;
            margin: 5px;
            img {
                width: 36px;
                height: 36px;
            }
        }
    }
    .imgPop {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(255, 255, 255, 0.3);
        padding: 20px;
        text-align: center;
        img {
            display: inline-block;
            max-width: 100%;
            max-height: 100%;
            vertical-align: middle;
        }
    }
    .tab-followup {
        border-top: 1px dashed #ccc;
        margin-top: 6px;
        padding: 5px;
        cursor: pointer;
        font-size: 14px;
        color: #888;
    }
</style>